<template>
  <div id="虎年吉祥" class="banner">
    <div class="banner__wrap scrollpoint sp-effect3"
			>
      <div class="banner__slide">
				<img class="banner__img" src="~@/assets/images/banner/2.jpg" />
				<img class="banner__img" src="~@/assets/images/banner/1.jpg" />
				<img class="banner__img" src="~@/assets/images/banner/5.jpg" />
				<img class="banner__img" src="~@/assets/images/banner/4.jpg" />
				<img class="banner__img" src="~@/assets/images/banner/3.jpg" />
        <img
					@click="change(false)"
          class="banner__arrow l cursor"
          src="~@/assets/images/banner/prev.png"
        />
        <img
					@click="change(true)"
          class="banner__arrow r cursor"
          src="~@/assets/images/banner/next.png"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  setup() {
    function getStyle(obj, attr) {
			return obj.currentStyle ? obj.currentStyle[attr] : window.getComputedStyle(obj, null)[attr];
    };
    function animate(obj, json, fn) {
      clearInterval(obj.timer);
      obj.timer = setInterval(() => {
        let flag = true;
        for (let attr in json) {
          let current = 0;
					current = attr == "opacity" ? Math.round(parseInt(getStyle(obj, attr) * 100)) || 0 : parseInt(getStyle(obj, attr));
          let step = (json[attr] - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          if (attr == "opacity") {
            if ("opacity" in obj.style) {
              obj.style.opacity = (current + step) / 100;
            } else {
              obj.style.filter = "alpha(opacity = " + (current + step) * 10 + ")";
            }
          } else if (attr == "zIndex") {
            obj.style.zIndex = json[attr];
          } else {
            obj.style[attr] = current + step + "px";
          }
          if (current != json[attr]) flag = false;
        }
        if (flag) {
          clearInterval(obj.timer);
					fn && fn();
        }
      }, 10);
    };
		let json = [{
				width: 400,
				top: 20,
				left: 50,
				opacity: 60,
				zIndex: 2
			}, {
				width: 490,
				top: 70,
				left: 0,
				opacity: 88,
				zIndex: 3
			}, {
				width: 600,
				top: 100,
				left: 200,
				opacity: 100,
				zIndex: 4
			}, {
				width: 490,
				top: 70,
				left: 510,
				opacity: 80,
				zIndex: 3
			}, {
				width: 400,
				top: 20,
				left: 550,
				opacity: 88,
				zIndex: 2
		}];
		let images = [];
		let throttle = true;
		onMounted(() => {
			images = document.querySelectorAll('.banner__img');
			json.forEach((attr, index) => {
				if(index < images.length) animate(images[index], attr);
			});
		});

		function changeBanner(flag) {
			if(flag) {
				json.push(json.shift());
			}else {
				json.unshift(json.pop());
			}
			json.forEach((attr, index) => {
				animate(images[index], attr, (() => {
					throttle = true;
				}))
			});
		}

    return {
			change(flag) {
				throttle && changeBanner(flag);
			}
		};
  },
});
</script>

<style scoped>
.banner {
  width: 100%;
  margin-top: 20px;
	user-select: none;
}
.banner__wrap {
  width: 1000px;
  margin: 0px auto;
}
.banner__slide {
  height: 500px;
  position: relative;
}
.banner__img {
	position: absolute;
  width: 100%;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
	border-radius: 2px;
}
.banner__arrow {
  width: 76px;
  height: 112px;
  position: absolute;
  bottom: 24px;
  z-index: 10;
	opacity: 0.6;
	transform: scale(1);
	transition: all 0.4s;
}
.banner__arrow:hover{
	opacity: 1;
	transform: scale(1.2);
}
.banner__arrow.l {
  left: 0;
}
.banner__arrow.r {
  right: 0;
}
</style>
